<template>
        <CategorySelector/>
    <el-card style="margin-top:10px;">
      <el-button type="primary" :icon="Plus">添加SPU</el-button>
      <el-table border style="margin:10px 0;" :data="spulistdata">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="spuName" label="SPU名称"></el-table-column>
        <el-table-column prop="description" label="SPU描述"></el-table-column>
        <el-table-column label="操作">
          <el-button title="添加SKU" type="primary" :icon="Plus"></el-button>
          <el-button title="修改SPU" type="primary" :icon="Edit"></el-button>
          <el-button title="查看SKU" type="info" :icon="InfoFilled"></el-button>
          <el-button title="删除SPU" type="danger" :icon="Delete"></el-button>
        </el-table-column>
      </el-table>
      <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[3, 5, 8, 10]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout=" prev, pager, next, jumper,->,sizes,total"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
    </el-card>
</template>

<script lang="ts">
    export default {
        name:'Spulist'
    }
</script>

<script lang="ts" setup>
import { Plus,Edit,Delete ,InfoFilled} from '@element-plus/icons-vue';
import {ElMessage} from 'element-plus';
import {ref,watch} from 'vue'
import usercategorylist from '@/stores/category'
import {reqgetspulistdata} from '@/api/Product/Spu'
import type {spulistmodul} from '@/api/Product/model/Spu'

  //  定义pinia里的数据
let categoryliststore = usercategorylist()
// 分页器的数据
const currentPage = ref(1)
const pageSize = ref(3)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const total = ref<number>(0)

// 定义列表数据 
let spulistdata =ref<spulistmodul>([])

// 封装请求列表数据方法
let getspulistdata = async ()=>{
   let newdata = await reqgetspulistdata(currentPage.value,pageSize.value,categoryliststore.categorySelectorid3 as number)
   ElMessage.success('数据请求成功')
   total.value = newdata.total;
   spulistdata.value = newdata.records
}
// 监听3级ID发生变化重新请求数据
watch(()=>categoryliststore.categorySelectorid3 , (category3Id)=>{
    if(!categoryliststore.categorySelectorid3){
        spulistdata.value = []
        return
    }
    getspulistdata()
},{immediate:true})
//   一页数据发生变化时
const handleSizeChange = (val: number) => {
    pageSize.value = val
    currentPage.value = 1
    getspulistdata()
}
//页码发生变化时
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getspulistdata()
}
</script>

<style lang="scss" scoped>

</style>